import React, { FC, useState } from 'react';

interface NotePreviewProps {
  onPageChange?: (page: string) => void;
}

const NotePreview: FC<NotePreviewProps> = ({ onPageChange }) => {
  // 添加下拉菜单显示状态
  const [showDropdown, setShowDropdown] = useState(false);

  // 处理返回修改按钮点击
  const handleReturnToEdit = () => {
    console.log('返回修改按钮点击');
    // 使用onPageChange切换回编辑页面
    if (onPageChange) {
      onPageChange('draftEdit');
    } else {
      // 备用方案：使用浏览器历史返回
      window.history.back();
    }
  };

  // 处理下载笔记按钮点击
  const handleDownloadNote = () => {
    console.log('下载笔记按钮点击');
  };

  // 处理不同格式的下载
  const handleDownloadFormat = (format: string) => {
    console.log(`下载${format}格式笔记`);
    setShowDropdown(false);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <div style={{ backgroundColor: '#fff', padding: '40px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
        {/* 笔记标题 */}
        <h1 style={{ textAlign: 'center', marginBottom: '30px', fontSize: '24px', fontWeight: 'bold' }}>律师接待笔录</h1>
        
        {/* 基本信息 */}
        <div style={{ marginBottom: '30px' }}>
          <p style={{ textAlign: 'center', marginBottom: '15px' }}>时间：2024年 月 日</p>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '15px' }}>
            <div>
              <span>地点：</span>
              <span>北京市海淀区</span>
            </div>
            <div>
              <span>接待律师：</span>
              <span>张三律师</span>
            </div>
            <div>
              <span>记录律师：</span>
              <span>李四律师</span>
            </div>
            <div>
              <span>记录人：</span>
              <span>王五</span>
            </div>
          </div>
          
          <p style={{ marginBottom: '15px' }}>被接待人：</p>
          
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '15px', marginBottom: '15px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>姓名：</span>
              <span>张三</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>性别：</span>
              <span>男</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>民族：</span>
              <span>汉族</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>出生日期：</span>
              <span>1990年1月1日</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>身份证号：</span>
              <span>44010119900101001X</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
              <span style={{ fontWeight: 'bold' }}>联系电话：</span>
              <span>13800138000</span>
            </div>
          </div>
        </div>
        
        {/* 案件情况 */}
        <div style={{ marginBottom: '30px', lineHeight: '1.6' }}>
          <p style={{ marginBottom: '15px' }}>
            被接待人因与　　　关于　　　一事，特向××律师事务所进行咨询，根据有关法律规定，经本所律师接待(出示证件)，接待律师就有关事项制作本笔录。
          </p>
          
          <h3 style={{ marginBottom: '15px', fontSize: '18px' }}>询问内容：</h3>
          
          <div style={{ marginBottom: '15px' }}>
            <p style={{ marginBottom: '10px' }}><strong>接待律师：</strong>我们是××律师事务所律师，接下来我们会跟您进行一些简单的沟通，了解案件的情况及您的需求。</p>
            <p style={{ marginBottom: '10px' }}><strong>被接待人：</strong>好的。</p>
          </div>
          
          <div style={{ marginBottom: '15px' }}>
            <p style={{ marginBottom: '10px' }}><strong>接待律师：</strong>你是本案的一方当事人吗？</p>
            <p style={{ marginBottom: '10px' }}><strong>被接待人：</strong>是。</p>
          </div>
          
          <div style={{ marginBottom: '15px' }}>
            <p style={{ marginBottom: '10px' }}><strong>接待律师：</strong>你先讲一下案件的情况(有无与案件相关的诉讼文书、法律文书及证据情况)</p>
            <p style={{ marginBottom: '10px' }}><strong>被接待人：</strong></p>
          </div>
          
          <div style={{ marginBottom: '15px' }}>
            <p style={{ marginBottom: '10px' }}><strong>接待律师：</strong>你应该保证向我们反映的情况及的证据材料是完全真实的，否则，您将承担由此造成的不利后果。您清楚吗？</p>
            <p style={{ marginBottom: '10px' }}><strong>被接待人：</strong>清楚。</p>
          </div>
        </div>
        
        {/* 法律风险提示 */}
        <div style={{ marginBottom: '30px', lineHeight: '1.6' }}>
          <p style={{ marginBottom: '15px' }}>
            <strong>接待律师：</strong>根据你所陈述的情况，我们可以为你提供法律服务。在接受委托之前，我们要向你告知如下法律服务风险和法律服务要求：
          </p>
          
          <ul style={{ marginLeft: '20px', marginBottom: '15px' }}>
            <li style={{ marginBottom: '8px' }}>律师不承担办案风险，律师不能承诺办案结果，也无法承诺办案结果的具体期限；</li>
            <li style={{ marginBottom: '8px' }}>律师只能依法维护你的合法权益，不能为你弄虚作假和提供伪证；</li>
            <li style={{ marginBottom: '8px' }}>律师应当依法提供法律服务，不负责为办案人员请客送礼和行贿；</li>
            <li style={{ marginBottom: '8px' }}>你本人应当积极举证，需要律师为你调查取证的，你应全力配合律师调查取证；</li>
            <li style={{ marginBottom: '8px' }}>如果你隐瞒重要事实或委托的事项违法或者利用律师提供的服务从事违法活动，律师有权拒绝代理。</li>
          </ul>
          
          <div style={{ marginBottom: '15px' }}>
            <p style={{ marginBottom: '10px' }}><strong>接待律师：</strong>以上告知事项，你都听清楚了吗？</p>
            <p style={{ marginBottom: '10px' }}><strong>被接待人：</strong>清楚了。</p>
          </div>
        </div>
        
        {/* 确认声明 */}
        <div style={{ marginBottom: '40px', lineHeight: '1.6' }}>
          <p style={{ marginBottom: '15px' }}>
            以上记录内容我已详细阅读或仔细听了律师的宣读，记录的内容均我口述，并且准确无误。如有不实，我愿承担一切法律责任，同时，对律师的告知内容我已全面了解。清楚。
          </p>
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
            <p>被询问人/委托人(签名并捺印)：</p>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
            <p>年　　月　　日</p>
          </div>
        </div>
        
        {/* 按钮组 */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: '30px', marginTop: '50px' }}>
          <button
            onClick={handleReturnToEdit}
            style={{
              padding: '10px 40px',
              border: '1px solid #d9d9d9',
              color: '#333',
              background: 'white',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            返回修改
          </button>
          {/* 下载下拉菜单 */}
          <div 
            style={{ position: 'relative', display: 'inline-block' }}
            onMouseEnter={() => setShowDropdown(true)}
            onMouseLeave={() => setShowDropdown(false)}
          >
            <button
              style={{
                padding: '10px 40px',
                border: 'none',
                color: 'white',
                background: '#415f91',
                borderRadius: '4px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '8px'
              }}
            >
              下载笔记
              <span>▲</span>
            </button>
            {showDropdown && (
              <div 
                style={{
                  position: 'absolute',
                  bottom: '100%',
                  left: 0,
                  marginBottom: '2px', // 减小间隙
                  backgroundColor: 'white',
                  border: '1px solid #e8e8e8',
                  borderRadius: '4px',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                  zIndex: 1000,
                  minWidth: '120px'
                }}
              >
                <button
                  onClick={() => handleDownloadFormat('docx')}
                  style={{
                    width: '100%',
                    padding: '10px 16px',
                    border: 'none',
                    backgroundColor: 'transparent',
                    textAlign: 'left' as const,
                    cursor: 'pointer',
                    fontSize: '14px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f5f5f5'}
                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
                >
                  <span>📄</span>
                  docx格式
                </button>
                <button
                  onClick={() => handleDownloadFormat('pdf')}
                  style={{
                    width: '100%',
                    padding: '10px 16px',
                    border: 'none',
                    backgroundColor: 'transparent',
                    textAlign: 'left' as const,
                    cursor: 'pointer',
                    fontSize: '14px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px'
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f5f5f5'}
                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
                >
                  <span>📑</span>
                  pdf文档
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotePreview;